import OptionAnsers from "./OptionAnswers";
import { questionType2Text } from '@/utils'
import { useState } from "react";
import { Button, Toast } from "antd-mobile";
interface IProp {
    data: PracticeData
}
// 选择题型
export default function Options({ data }: IProp) {
    const answerList = JSON.parse(data.optionContent as string) as AnserData[];
    // 选择题，可能是单选(one,check)，可能是多选(many),此时我们所有的选择题，都是同一个组件
    // 所以要考虑到 组件 的通用性，这个答案，既能装多选的答案，也能装单选的答案
    const [userAnswer, setUserAnswers] = useState<string[]>([])
    const change = (value: string) => {
        if (data.questionType === "many") {
            // 如果是多选
            const index = userAnswer.indexOf(value);
            if (index >= 0) {
                // 如果是已经选中的答案，就是取消选中                
                userAnswer.splice(index, 1);
                setUserAnswers([...userAnswer])
            } else {
                setUserAnswers([...userAnswer, value])
            }
        } else {
            //    如果是单选
            // 把 从子组件传递回来的 ABCD 放到数组里面
            setUserAnswers([value])
        }
    }

    const checkAnswer = () => {
        // 对比 userAnswer 和题目的 answer 
        if (userAnswer.sort().join(',') === data.answer) {
            Toast.show({
                icon: 'success',
                content: '回答正确'
            })
        } else {
            Toast.show({
                icon: 'fail',
                content: '回答错误'
            })
        }
    }

    return <div className="option">
        <div className="title">
            <div className="tag">{questionType2Text[data.questionType]}</div>
            <div className="text">{data.title}</div>
        </div>
        <div className="answers">
            {
                answerList?.map(item => <OptionAnsers onChange={change} answers={userAnswer} data={item} />)
            }
        </div>
        <div>
            <Button onClick={checkAnswer} color="primary" fill="outline">确定</Button>
        </div>
    </div>
}